<template>
    <div class="search-tpl">
        <div class="search-box">
            <div class="left-search">
                <i class="iconfont icon-sousuo"></i>
                <div class="cube-input">
                    <input class="cube-input-field"  type="text" v-model="searchval" @keyup.enter="searchFn" @input="changeInput" placeholder="搜索手机号">
                </div>
            </div>
            <button type="button" class="cancel" @click="cancel">取消</button>
        </div>

        <div class="search-list" v-show="searchval">
            <div class="my-friends">
                <div class="title">搜索</div>
                <div class="my-friends-list">
                    <nodata v-if="friends.length < 1" :title="nulltitle"></nodata>
                    <div v-else v-for="(item,index) in friends" :key="index">
                        <user-item :item="item" :add="add" :sendtext="item.relation == '0'?sendtext:'请求已发送'" @onsendSub="onsendSub"></user-item>
                    </div>
                </div>
            </div>
        </div>

        <!--添加好友  描述-->
        <add-dialog v-if="dialogshow" :item="onself" @hidedialog="hidedialog" @sendtext="onsendtext"></add-dialog>
    </div>
</template>

<script>    
import {mapGetters} from 'vuex'
import userItem from '@/components/friends/item.vue'
import addDialog from '@/components/friends/dialog.vue'
export default {
    data(){
        return {
            searchval:'',
            friends:[],
            nulltitle:'',
            dialogshow:false,
            onself:'',
            add:true,
            sendtext:'加好友'
        }
    },
    components:{
        userItem,
        addDialog
    },
    mounted(){

    },
    created(){
        if(this.getFriends.length < 1){
            this.getMyFriends();
        }
    },
    computed:{
        ...mapGetters([
            'getFriends'
        ])
    },
    methods:{
        onsendtext(val){
            this.sendtext = val
            this.add = false
        },
        /**
         * 加好友
         */
        onsendSub(item){
            this.dialogshow = true
            this.onself = item
        },
        /**
         * 隐藏弹窗
         */
        hidedialog(){
            this.dialogshow = false
        },
        cancel(){
            this.$emit('hidesearch')
        },
        searchFn(){
            if(!this.searchval){
                return;
            }
            this.$http.get(`/Message/searchPerson`,{
                // searchName:this.searchval,
                searchMobile:this.searchval
            }).then( res => {
                console.log(res)
                if(res.data.UserLists && res.data.UserLists.length > 0){
                    this.friends = res.data.UserLists
                }else{
                    this.nulltitle = '用户不存在'
                }
            })
        },
        /** 
         * 监听搜索变化查询好友
         */
        changeInput(){
            if(!this.searchval){
                this.friends = []
                this.nulltitle = ''
            }
            let filtered=this.getFriends.filter((porduct) =>{
                return porduct.phone.indexOf(this.searchval) > -1
            })
            if(filtered.length > 0){
                this.friends = filtered
            }else{
                this.friends = []
            }
            
        },
        /**
         * 获取我的好友列表
         */
        getMyFriends(){
            this.$http.get(`/Message/getMyFriends`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.$store.commit('setfriends',res.data.friends)
                }
            })
        },
    }
}
</script>



<style lang="stylus">
.search-tpl{
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background rgba(0,0,0,0.6)
    z-index 999
    .search-box{
        width:100%;
        display:flex;
        background:#fff;
        align-items center;
        padding:5px;
        border-bottom:1px solid #e1e1e1;
        .left-search{
            display:flex;
            align-items center;
            flex:1;
            background:#eee;
            padding:2px;
            border-radius:5px;
            margin-right:5px;
            .iconfont{
                font-size:20px;
                color:#999;
            }
            .cube-input{
                flex:1;
                background:transparent;
                height:30px;
                .cube-input-field{
                    height:30px;
                    &::-webkit-input-placeholder { 
                        color: #999;
                        font-size: 12px;
                    }
                }
                
            }
        }
        .cancel{
            height:30px;
            color:rgb(61, 129, 203);
            font-size:14px;
        }
    }
    .search-list{
        height:calc(100% - 45px);
        background:#fff;
        .my-friends{
            height:100%;
            .title{
                font-size:14px;
                background:#eee;
                height:30px;
                line-height 30px;
                padding:0 10px;
                color:#000;
            }
            .my-friends-list{
                 height:calc(100% - 30px);
                 overflow-y:auto;
                .ul-li{
                    padding:0 10px;
                    li{
                        display flex
                        align-items center
                        padding:10px 0;
                        border-bottom:1px solid #eee;
                        .avatar{
                            font-size:40px;
                            color:#757575;
                            background:#eee;
                            margin-right:10px;
                            border-radius:3px;
                        }
                        .user-right{
                            line-height:20px;
                            .name{
                                color:#333;
                                font-size:14px;
                            }
                            .phone{
                                color:#666;
                                font-size:12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
